<template>
	<view class="my-userinfo-container">
	
	    <!-- 头像昵称区域 -->
	    <view class="top-box">
	      <image class="avatar" :src="userInfo.avatarUrl"></image>
	      <view class="nickname">{{userInfo.nickName}}</view>
	    </view>
		<!-- 面板的列表区域 -->
		<view class="top-body">
			<!-- 第一个板块 -->
			<view class="top-one">
				<view class="top-item">
					<text>8</text>
					<text>收藏的店铺</text>
				</view>
				<view class="top-item">
					<text>14</text>
					<text>收藏的商品</text>
				</view>
				<view class="top-item">
					<text>18</text>
					<text>关注的商品</text>
				</view>
				<view class="top-item">
					<text>84</text>
					<text>足迹</text>
				</view>
			</view>
			<!-- 第二个板块 我的订单 -->
			<view class="top-two">
				<view class="top-title">
					<text>我的订单</text>
				</view>
				<view class="top-image">
					<view class="top-item">
						<image src="/static/my-icons/icon1.png" class="icon"></image>
						<text>待付款</text>
					</view>
					<view class="top-item">
						<image src="/static/my-icons/icon2.png" class="icon"></image>
						<text>待收货</text>
					</view>
					<view class="top-item">
						<image src="/static/my-icons/icon3.png" class="icon"></image>
						<text>退款/退货</text>
					</view>
					<view class="top-item">
						<image src="/static/my-icons/icon4.png" class="icon"></image>
						<text>全部订单</text>
					</view>
				</view>
			</view>
			<!-- 第三个板块 -->
			<view class="top-three">
			  <view class="panel-list-item">
				<text>收货地址</text>
				<uni-icons type="arrowright" size="15"></uni-icons>
			  </view>
			  <view class="panel-list-item">
				<text>联系客服</text>
				<uni-icons type="arrowright" size="15"></uni-icons>
			  </view>
			  <view class="panel-list-item" @click="logout">
				<text>退出登录</text>
				<uni-icons type="arrowright" size="15"></uni-icons>
			  </view>
			</view>
		</view>
	
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	export default {
		computed: {
			// 将 m_user 模块中的 userinfo 映射到当前页面中使用
			    ...mapState('m_address', ['userInfo'])
		},
		name:"my-userInfo",
		data() {
			return {
				
			};
		},
		methods: {
			...mapMutations('m_address',['updateAddress','updateUserInfo','updateToken','outLogin']),
			//退出登录
			async logout(){
				const [item,res] = await uni.showModal({
					content:'确认退出登录吗？',
					title:'提示'
				}).catch(item => item)
				if(res != null && res.confirm){
					this.updateAddress({})
					this.updateUserInfo({})
					this.updateToken('')
				}
			}
		}
	}
</script>

<style lang="scss">
.my-userinfo-container{
	height: 100%;
	background-color: #f4f4f4;
	.top-box{
		height: 400rpx;
		background-color: #c00000;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		.avatar{
			width: 90px;
			height: 90px;
			border: 2px solid white;
			border-radius: 100%;
			box-shadow: 0 3px 10px black;
		}
		.nickname{
			color: white;
			font-weight: bold;
			font-size: 16px;
			margin-top: 10px;
		}
	}
	// <!-- 面板的列表区域 -->
	.top-body{
		position: relative;
		top: -10px;
		// justify-content: center;
		// align-items: center;
		// flex-direction: column;
		// display: flex;
		// 第一个板块
		.top-one{
			display: flex;
			background-color: white;
			height: 100rpx;
			justify-content: space-around;
			align-items: center;
			border-radius: 3px;
			// position: absolute;
			margin: 0 10px;
			.top-item{
				display: flex;
				flex-direction: column;
				text-align: center;
				font-size: 12px;
				// justify-content: space-around;
				padding: 10px 0;
			}
		}
		// 第二个板块
		.top-two{
			background-color: white;
			// margin-top: 20px;
			position: relative;
			top: 10px;
			margin: 0 10px;
			.top-title{
				height: 40px;
				align-items: center;
				display: flex;
				padding: 0 10px;
				border-bottom: 1px solid #efefef;
			}
			.top-image{
				display: flex;
				justify-content: space-around;
				.top-item{
					padding: 10px 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					font-size: 13px;
					.icon{
						width: 35px;
						height: 35px;
					}
				}
			}
		}
		//第三个板块
		.top-three{
			margin-top: 20px;
			.panel-list-item{
				background-color: white;
				justify-content: space-between;
				display: flex;
				padding: 10px 10px;
				margin: 0 10px;
				border: 1px solid #efefef;
			}
		}
	}
}
</style>